<!--
 * @页面: 柱状图
 * @描述:
 * @作者：赵涛
 * @日期: 2021-07-13 14:27:29
-->
<template>
  <div class="hot-sale">
    <div class="charts"
         id="hotSale" />
  </div>
</template>

<script>
import { Column } from '@antv/g2plot'

export default {
  name: 'HotSale',
  data() {
    return {
      hotData: [] // 获取到的数据
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.timer = setInterval(this.getData, 10000)
    this.draw()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      // 获取热点产品数据
      this.$http({
        method: 'get',
        url: '/api/dataReport.ashx?action=!PMixSalesTmp',
        data: {}
      }).then(res => {
        if (res.status) {
          console.log('热点产品数据', res.data.dt)
          this.hotData = res.data.dt
          this.$emit('hotDataLength', res.data.count)
        }
      })
    },
    // 绘制柱状图
    draw() {
      console.log('画图')
      const stackedColumnPlot = new Column('hotSale', {
        data: this.hotData,
        isStack: true,
        xField: 'Product',
        yField: 'Qty',
        seriesField: 'mType',
        intervalPadding: 40,
        padding: [20, 50, 20, 80],
        color: ['#3cd3ff', '#ffeb7b'],
        xAxis: {
          label: {
            style: {
              fill: 'white'
            }
          }
        },
        legend: {
          itemName: {
            style: {
              fill: 'white',
              fontSize: 14
            }
          }
        },
        label: {
          // 可手动配置 label 数据标签位置
          position: 'top', // 'top', 'bottom', 'middle'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: 'interval-adjust-position' },
            // 数据标签防遮挡
            { type: 'interval-hide-overlap' },
            // 数据标签文颜色自动调整
            { type: 'adjust-color' }
          ],
          interactions: [{ type: 'element-active' }]
        }
      })
      stackedColumnPlot.render()
      const interval = setInterval(() => {
        const newData = this.hotData
        if (newData) {
          stackedColumnPlot.changeData(newData)
        } else {
          clearInterval(interval)
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.hot-sale {
  width: 100%;
  height: 100%;
  .charts {
    width: 100%;
    height: 100%;
  }
}
</style>
